<template>
  <div class="user-mng">
    <CellGroup>
      <Field
        :model-value="UserLoginStatus[params.status]"
        is-link readonly clickable class="query"
        placeholder="用户状态"
        @click="params.showPicker = true">
      </Field>
      <Field v-model="params.userName"
        class="query" name="userName"
        autocomplete="off" placeholder="用户名" />
      <Field v-model="params.realName"
        class="query" name="realName"
        autocomplete="off" placeholder="真实姓名" />
    </CellGroup>

    <Button type="primary" block
      :loading="state.loading"
      @click="fetchData">搜索</Button>

    <div class="user-container">
      <UserCard :user="user"
        v-for="user in state.data"
        :key="user.userId"
        @clear="handleUserClear"
        @freeze="handleFreezeTime"
        @status="handleStatus"
        @info="handleUserInfo" />
      <SkeletonCard v-if="state.loading" />
      <Empty description="暂无数据"
        v-if="!state.loading && !state.data.length" />
    </div>
  </div>
  <Popup v-model:show="params.showPicker" round
    position="bottom" destroy-on-close
    style="height: 60%;"
    :safe-area-inset-bottom="true"
    @click-close-icon="params.showPicker = false">
    <Picker :columns="[
      { text: '全部', value: UserLoginStatus.全部 },
      { text: '正常', value: UserLoginStatus.正常 },
      { text: '禁用', value: UserLoginStatus.禁用 },
    ]" @cancel="params.showPicker = false"
      @confirm="onConfirmFaceValue"
      :loading="state.loading">
    </Picker>
  </Popup>
  <Modals />
</template>
<script setup lang="ts">
import {
  Button, CellGroup, Empty, Field,
  Picker, Popup, showConfirmDialog,
} from 'vant';

import SkeletonCard from '@/components/SkeletonCard.vue';

import Modals, { ModalUserFreeezeSetting, ModalUserInfo } from '../components';
import UserCard from '../components/UserCard.vue';
import { UserLoginStatus } from '../const';
import useUserList from '../hooks/useUserList';
import type UserItem from '../models/UserItem';

const {
  params, handleClear,
  state, fetchData, handleUpdate,
} = useUserList();

const handleStatus = (user: UserItem) => {
  showConfirmDialog({
    message: `确定要${+user.status === UserLoginStatus.正常 ? '禁用' : '启用'}用户登录状态吗？`,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(async () => {
    await handleUpdate(user);
    fetchData();
  });
};

const handleUserClear = (user: UserItem) => {
  showConfirmDialog({
    message: `确定要清楚用户${user.userName}的余额吗？`,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(async () => {
    await handleClear(user);
    fetchData();
  });
};

const handleFreezeTime = (user: UserItem) => {
  ModalUserFreeezeSetting.show({
    title: '设置冻结时间',
    record: user,
    reload: fetchData,
  });
};

const handleUserInfo = (user: UserItem) => {
  ModalUserInfo.show({
    title: '用户信息',
    record: user,
    reload: fetchData,
  });
};

const onConfirmFaceValue = (e: any) => {
  params.value.status = e.selectedOptions[0].value;
  params.value.showPicker = false;
};
</script>
<style lang="less" scoped>
.user-mng {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px;

  .query {
    margin: 10px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .user-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
}

.ml-auto {
  margin-left: auto;
}
</style>
